<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/4
  Time: 22:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>SAS症状统计页面</title>
    <script type="application/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/static/echarts.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>

<div>

    <div style="width: 400px;height:680px;float: left;">
        <div id="columnmain" style="width: 400px;height:200px; "></div>
        <div id="circlemain" style="width: 400px;height:190px; "></div>
        <div id="left" style="width: 400px;height:280px;">
            <table class="layui-hide" id="test1" lay-filter = "test1"></table>
        </div>
    </div>

    <div id="right" style="width: 900px; float:left;margin-left: 10px">
        <%--模糊查询的form表单--%>
        <form class="layui-form" action="">
            <%--刷新页面按钮--%>
            <button class="layui-btn layui-btn-radius layui-btn-xs layui-btn-warm layui-icon layui-icon-refresh-1" onClick="document.location.reload()"></button>

            <div class="layui-inline">
                <label class="layui-form-label">测试人名字</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" placeholder="请输入测试人名字" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" placeholder="请输入电话" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">焦虑等级</label>
                <div class="layui-input-block">
                    <select name="anxietylevel"  class="layui-select">
                        <option value="">请选择...</option>
                        <option value="正常">正常</option>
                        <option value="轻度">轻度</option>
                        <option value="中度">中度</option>
                        <option value="重度">重度</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <%-- 显示所有做题记录的table --%>
        <table class="layui-hide" id="test" lay-filter = "test"></table>
    </div>
</div>



<script>
    layui.use(['table','layer','form','jquery'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var namestatus=true;

        var columndata=[];
        var countdata=[];
        var cicledata=[];

        /*
            右边数据表
         */
        table.render({
            elem: '#test',
            page:true,
            limit:10,
            limits:[10,20,30,40],
            url:'${pageContext.request.contextPath}/tSasRecord/statistics', //表格了里面所需要的数据就是一个list里面有很多的map、对象
            cellMinWidth:50, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [[
                {type:'numbers',title:'序号'},
                // field 后面跟的内容  必须跟后台传过来的数据里面的map 的key保持一致
                {field:'username', title: '测试人', sort: true},
                {field:'tel', title: '电话', sort: true},
                {field:'t', title: 'T(临界值为50分)', sort: true},
                {field:'anxietylevel', title: '焦虑程度', sort: true},
                {field:'createtime', title: '测试时间',width: 180, sort: true}
            ]]
        });

        //模糊查询事件
        form.on('submit(formDemo)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //alert(JSON.stringify(data.field))
            table.reload('test', {
                //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                where: data.field,//排序字段
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        /*
            左边图形表
         */
        table.render({
            elem: '#test1',
            page:true,
            limit:4,
            limits:[4],
            url:'${pageContext.request.contextPath}/tSasRecord/statisticsTu', //表格了里面所需要的数据就是一个list里面有很多的map、对象
            cellMinWidth:80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [[
                {type:'numbers',title:'序号'},
                // field 后面跟的内容  必须跟后台传过来的数据里面的map 的key保持一致
                {field:'count', title: '人数', sort: true},
                {field:'anxietylevel', title: '焦虑程度', sort: true},
            ]],
            done: function(res){
                columndata=[];
                cicledata=[];
                res.data.forEach(function (item){
                    /*
                        柱状图
                     */
                    columndata.push(item.anxietylevel);
                    countdata.push(item.count);
                    /*
                        饼状图
                     */
                    var obj={};
                    obj["value"]=item.count;
                    obj["name"]=item.anxietylevel;
                    cicledata.push(obj);
                })
                // 数据渲染完之后开始显示echart的图
                getEchartPic1();
                getEchartPic2();
            }
        });

        /*
            柱状图
         */
        var getEchartPic1=function (){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('columnmain'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'SAS焦虑程度分析'
                },
                tooltip: {},
                legend: {
                    data: ['人数']
                },
                xAxis: {
                    data: columndata
                },
                yAxis: {},
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        data: countdata
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        /*
            饼状图的填充
         */
        var getEchartPic2 = function(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('circlemain'));

            // 指定图表的配置项和数据
            option = {
                title: {
                    text: 'SAS测试焦虑程度分析',
                    // subtext: '分析数据',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                color:["#d76868","#38e838","rgba(224,208,208,0.9)","rgba(241,6,6,0.9)"],
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data:cicledata,
                        // data: [
                        //     { value: 1048, name: 'Search Engine' },
                        //     { value: 735, name: 'Direct' },
                        //     { value: 580, name: 'Email' },
                        //     { value: 484, name: 'Union Ads' },
                        //     { value: 300, name: 'Video Ads' }
                        // ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

    });
</script>

</body>
</html>
